<template>
	<view class="main">
		<view class="list_div">
			<view class="top">
				<u-form @submit="cancelHandle" input-align="right" label-width='100'>
					<u-form-item label="姓名" ref="item1">
						<u-input v-model="model1.userInfo.name" placeholder="姓名需与身份证一致" />
					</u-form-item>
					<u-form-item label="手机号" ref="item1">
						<u-input v-model="model1.userInfo.phone" placeholder="请填写手机号" />
					</u-form-item>
					<u-form-item label="工龄" ref="item1">
						<u-input v-model="model1.userInfo.year" placeholder="请输入工龄" type="number" />
					</u-form-item>
					<u-form-item label="现地址" ref="item1" @click="getLocation">
						<u-input v-model="model1.userInfo.address" placeholder="目前居住地址" disabled />
					</u-form-item>
					<u-form-item label="工种" ref="item1" @click="showSex = true">
						<u-input clickable v-model="model1.userInfo.type" placeholder="请选择工种" disabled />
					</u-form-item>
					<u-form-item label="服务区域" ref="item1" @click="btnClick">
						<u-input readonly clickable v-model="addressData.formatted_address" placeholder="请选择服务区域"
							disabled />
					</u-form-item>
					<u-form-item label="个人简介" ref="item1">
						<u-input v-model="model1.userInfo.introduce" placeholder="请填写个人简介" />
					</u-form-item>
					<view class="uploadImg">
						<span class="label">照片上传</span>
						<view class="avatar_show">
							<view class="bg-img2" @tap="chooseImage2" v-if="evaluate.avatar">
								<image style="width: 100%; height: 100%" :src="evaluate.avatar" mode="aspectFill">
								</image>
								<span>上传头像</span>
							</view>
							<view class="craftsmancShow" v-else>
								<view class="dashed" @tap="chooseImage2"></view>
								<span>上传头像</span>
							</view>
							<view class="bg-img" v-for="(item, index) in evaluate.images" :key="index"
								@tap="viewImage(index)">
								<image style="width: 100%; height: 100%" :src="$wanlshop.oss(item, 90, 90)"
									mode="aspectFill"></image>
								<view class="icon_x" @tap.stop="delImg(index)"><text class="wlIcon-31guanbi"></text>
								</view>
							</view>
							<view class="craftsmancShow">
								<view class="dashed" @tap="chooseImage"></view>
								<span>上传工匠秀</span>
							</view>
						</view>
					</view>
					<!-- 工种弹窗 -->
					<div style="margin-top: 30px">
						<u-button style="background-color: #fe6601; border: none" round block type="info"
							native-type="submit">提交</u-button>
					</div>
				</u-form>
			</view>
		</view>

		<!-- 工种弹窗 -->
		<u-popup v-model="showSex" position="bottom">
			<u-picker show-toolbar :columns="actions" @confirm="onConfirm2" @cancel="showSex = false" />
		</u-popup>
		<wanl-address ref='wanlAddress' @selectAddress="successSelectAddress"></wanl-address>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityList: [],
				// areaList: [],
				showArea: false,
				dataList: {},
				evaluate: {
					images: [],
					avatar: ''
				},
				showSex: false,
				model1: {
					userInfo: {
						id: '',
						name: '',
						phone: '',
						address: '',
						year: '',
						type: '',
						typeId: '',
						introduce: '',
						area_id: ''
					}
				},
				addressData: {
					area_id: null,
					formatted_address: '', //详细地区
				},
				actions: [],
				radio: '',
				switchVal: false,
				type_list: [],
				lng: null,
				lat: null,
			};
		},
		onLoad() {
			let that = this
			// uni.getLocation({
			// 	type: 'wgs84',
			// 	success: (mres) => {
			// 		console.log(mres)
			// 		that.lng = mres.longitude;
			// 		that.lat = mres.latitude;
			// 	},
			// 	error: (err) => {
			// 		console.log(err);
			// 	}
			// });
		},
		mounted() {
			this.getFeedbackData();
			this.getType();
		},
		methods: {
			// 获取地址
			getLocation() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						that.model1.userInfo.address = res.name //详细地址
						that.lat = res.latitude //纬度
						that.lng = res.longitude //经度
					}
				});
			},
			btnClick() {
				this.$refs.wanlAddress.show()
			},
			successSelectAddress(address) {
				console.log(address)
				this.addressData.formatted_address = address.formatted_address;
				this.addressData.area_id = address.id;
			},
			// 回显请求
			async getFeedbackData() {
				await uni.request({
					url: '/worker/get_self_info',
					method: 'POST',
					success: (res) => {
						if (res.res.code == 1) {
							// let str = '';
							// this.cityList.forEach((item) => {
							// 	item.city.forEach((it) => {
							// 		it.area.forEach((i) => {
							// 			if (i.id == res.res.data.area_id) {
							// 				str = item.name + '/' + it.name + '/' +
							// 					i.name;
							// 			}
							// 		});
							// 	});
							// });
							this.evaluate.avatar = res.res.data.avatar;
							this.evaluate.images = res.res.data.images_data;
							this.model1 = {
								userInfo: {
									id: res.res.data.id,
									name: res.res.data.name,
									phone: res.res.data.mobile,
									address: res.res.data.address,
									year: res.res.data.year,
									type: res.res.data.type_name,
									typeId: res.res.data.type_id,
									introduce: res.res.data.desc,
									area_id: res.res.data.area_id
								}
							};
							this.addressData.area_id = res.res.data.area_id
							this.addressData.formatted_address = res.res.data.area_info
						} else {
							this.$wanlshop.msg(res.msg || '请求失败！');
						}
					}
				});
			},
			// 工种选择
			onConfirm2(value) {
				this.model1.userInfo.type = value;
				this.showSex = false;
			},
			// 图片预览
			viewImage(key) {
				uni.previewImage({
					urls: this.evaluate.images,
					current: this.evaluate.images[key]
				});
			},
			// 删除图片
			delImg(key) {
				this.evaluate.images.splice(key, 1);
			},
			// 选择图片上传
			chooseImage(index) {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: (updata) => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: (image) => {
											uni.uploadFile({
												url: updata.data.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.data
													.storage == 'local' ?
													null : updata.data
													.multipart,
												success: (data) => {
													this.evaluate.images
														.push(JSON.parse(
																data.data)
															.data.fullurl);
												},
												fail: (error) => {
													this.$wanlshop.msg(JSON
														.parse(error
															.data).msg);
												}
											});
										}
									});
								}
							}
						});
					}
				});
			},
			// 选择头像上传
			chooseImage2(index) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.request({
							url: '/wanlshop/common/uploadData',
							success: (updata) => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: (image) => {
											uni.uploadFile({
												url: updata.data.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.data
													.storage == 'local' ?
													null : updata.data
													.multipart,
												success: (data) => {
													this.evaluate.avatar =
														JSON.parse(data
															.data).data
														.fullurl;
												},
												fail: (error) => {
													this.$wanlshop.msg(JSON
														.parse(error
															.data).msg);
												}
											});
										}
									});
								}
							}
						});
					}
				});
			},
			// 请求工种
			async getType() {
				await uni.request({
					url: '/worker/get_type_list',
					method: 'GET',
					success: (res) => {
						if (res.res.code == 1) {
							this.type_list = res.res.data;
							this.actions = [];
							res.res.data.forEach((item) => {
								this.actions.push(item.name);
							});
						} else {
							this.$wanlshop.msg(res.msg || '请求失败！');
						}
					}
				});
			},
			// 请求地区数据
			async getAreaData() {
				await uni.request({
					url: '/wanlshop/common/area',
					method: 'POST',
					success: (res) => {
						if (res.res.code == 1) {
							this.cityList = res.res.data;
							this.getFeedbackData();
						} else {
							this.$wanlshop.msg(res.msg || '请求失败！');
						}
					}
				});
			},
			// 提交技能
			async cancelHandle() {

				this.type_list.forEach((item) => {
					if (item.name == this.model1.userInfo.type) {
						this.model1.userInfo.typeId = item.id;
					}
				});
				let data = {
					id: this.model1.userInfo.id,
					name: this.model1.userInfo.name,
					type_id: this.model1.userInfo.typeId,
					area_id: this.addressData.area_id,
					address: this.model1.userInfo.address,
					year: this.model1.userInfo.year,
					mobile: this.model1.userInfo.phone,
					desc: this.model1.userInfo.introduce,
					images: this.evaluate.images.length > 0 ? this.evaluate.images.join(',') : '',
					avatar: this.evaluate.avatar,
					lat: this.lat ? this.lat : '',
					lng: this.lng ? this.lng : '‌'
				};
				console.log(data);
				// return;
				await uni.request({
					url: '/worker/add',
					method: 'POST',
					data,
					success: (res) => {
						if (res.code == 200) {
							this.$wanlshop.msg(res.msg || '发布成功！');
							this.getFeedbackData();
						} else {
							this.$wanlshop.msg(res.msg || '请求失败！');
						}
					}
				});
			}
		}
	};
</script>

<style scoped lang="less">
	.main {
		height: calc(100vh - 100rpx);
		padding: 20rpx 34rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.list_div {
			padding: 24rpx 24rpx 40rpx;
			background-color: #fff;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			flex: 1;

			.top {
				.item_img {
					border-radius: 10rpx;
					width: 144rpx;
					height: 144rpx;
					margin-right: 24rpx;
				}

				.userInfo {
					span {
						font-size: 30rpx;
					}

					.time {
						font-size: 28rpx;

						span {
							color: #999999;
						}
					}
				}
			}

			.uploadImg {

				// padding: 0 30rpx;
				.label {
					display: block;
					margin: 40rpx 0 24rpx 30rpx;
				}

				.avatar_show {
					display: flex;
					flex-wrap: wrap;
					gap: 15rpx;


					.bg-img {
						position: relative;
						width: 192rpx;
						height: 192rpx;

						image {
							border-radius: 24rpx;
						}

						.icon_x {
							position: absolute;
							top: 0;
							right: 0;
							background-color: red;
							padding: 0 6rpx;
						}
					}

					.bg-img2 {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 192rpx;
						height: 232rpx;

						border-radius: 24rpx;

						image {
							border-radius: 24rpx;
							width: 192rpx;
							height: 192rpx;
						}

						span {
							color: #acacac;
							font-size: 28rpx;
						}
					}

					.craftsmancShow {
						display: flex;
						flex-direction: column;
						align-items: center;

						.dashed {
							width: 192rpx;
							height: 192rpx;
							border-radius: 20rpx;
							background: url('@/static/test/img.png');
							background-repeat: no-repeat;
							background-size: cover;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						span {
							margin-top: 10rpx;
							font-size: 28rpx;
							color: #acacac;
						}
					}
				}
			}
		}

		.btn {
			width: 100%;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			border-radius: 44rpx;
			// margin-top: 200rpx;
			background-color: #fe6601;
			color: #fff;
		}

		.nav {
			display: flex;
			flex-direction: column;

			// align-items: center;
			.top_title {
				padding: 0 30rpx;
				height: 100rpx;
				line-height: 100rpx;
				// text-align: center;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.main_area {
				ul {
					text-align: center;
					padding-left: 0;
					overflow-y: scroll;
					height: 600rpx;
				}

				li {
					height: 100rpx;
					line-height: 100rpx;
				}

				display: flex;

				.nav_left {
					width: 33%;

					ul {
						background-color: #f6f6f6;

						li {
							display: flex;
							align-items: center;

							.line {
								// padding-top: 30rpx;
								width: 4rpx;
								height: 40rpx;
								background-color: #ff961f;
							}

							span {
								flex: 1;
							}
						}
					}
				}

				.nav_center {
					width: 33%;

					ul {
						background-color: #fafafa;
					}
				}

				.nav_right {
					width: 33%;
				}
			}
		}
	}
</style>